<template>
	<div class="change-container">
		<!--设置支付密码内容-->
		<div class="change-account" v-if="!isSetPayPasswordSuccess">
			<div class="change-account-title">{{$t('message.setPayPwd')}}</div>
			<div v-if="step === 1">
				<div class="change-account-label">
					{{$t('message.hasBandedPhone')}}：<span>{{ phone }}</span>
				</div>
				<div class="change-account-label change-account-label-middle">
					<label for="verificationCode">{{$t('message.code')}}：</label>
				</div>
				<div class="change-account-input-btn">
					<div class="change-account-verification-input">
						<input type="password" id="verificationCode" v-model="verificationCode" :placeholder="this.$t('message.sendCodeHolder')" />
					</div>
					<div class="change-account-btn">
						<button type="button" @click="getVerificationCode" :disabled="isBtnDisabled">{{ btnText }}</button>
					</div>
				</div>
			</div>
			<div v-else>
				<div class="change-account-label">
					<label for="newPayPassword">{{$t('message.payPwd')}}：</label>
				</div>
				<div class="change-account-input">
					<input type="password" id="newPayPassword" ref="newPayPassword" v-model="newPayPassword" :placeholder="this.$t('message.sixNumberPassword')" />
				</div>
				<div class="change-account-label change-account-label-middle">
					<label for="reNewPayPassword">{{$t('message.payPwd2')}}：</label>
				</div>
				<div class="change-account-input">
					<input type="password" id="reNewPayPassword" ref="reNewPayPassword" v-model="reNewPayPassword" :placeholder="this.$t('message.payPwd2Holder')" />
				</div>
			</div>
			<div class="change-account-btn-group">
				<button type="button" class="btn-item btn-confirm" @click="nextStep" v-if="step === 1">{{$t('message.next')}}</button>
				<button type="button" class="btn-item btn-confirm" @click="setPayPassword" v-else>{{$t('message.yes')}}</button>
				<button type="button" class="btn-item btn-cancle" @click="closeDialog">{{$t('message.no')}}</button>
			</div>
		</div>
		<!--设置支付密码成功-->
		<div class="change-success" v-else>
			<div class="change-success-icon"></div>
			<div class="change-success-title">
				{{$t('message.changePhoneSuccess')}}
			</div>
			<div class="change-success-tip">
				{{ delayTime }}{{$t('message.autoClose')}}
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'PersonalAccountSetPayPassword',
  props: {
    phone: {
      type: String
    }
  },
  data () {
    return {
      isSetPayPasswordSuccess: false,
      step: 1,
      verificationCode: '',
      isBtnDisabled: false,
      btnTime: 60,
      btnStatus: 0,
      newPayPassword: '',
      reNewPayPassword: '',
      delayTime: 3
    }
  },
  computed: {
    btnText () {
      if (this.btnStatus === 0) {
        this.isBtnDisabled = false
        return this.$tc('message.codeText', 1)
      } else if (this.btnStatus === 1) {
        this.isBtnDisabled = true
        return this.$t('message.sending')
      } else if (this.btnStatus === 2) {
        this.isBtnDisabled = true
        return this.$tc('message.codeText', 2) + this.btnTime + 's)'
      }
    }
  },
  methods: {
    getVerificationCode () {
      this.btnStatus = 1
      this.$http.get('/api/getVerificationCode?phone=' + this.phoneNumber).then((res) => {
        this.changeBtnTime()
        this.btnStatus = 2
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    },
    changeBtnTime () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        if (this.btnTime <= 0) {
          clearInterval(this.timer)
          this.btnStatus = 0
          this.btnTime = 60
        } else {
          this.btnTime -= 1
        }
      }, 1000)
    },
    nextStep () {
      this.$http.get('/api/checkVerificationCode').then((res) => {
        if (res.data.status === 1) {
          this.verificationCode = ''
          this.btnStatus = 0
          this.step = 2
        } else {
          return
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    closeDialog () {
      this.$emit('close')
    },
    focus (el) {
      this.$refs[el].focus()
    },
    setPayPassword () {
      this.$http.get('/api/checkVerificationCode').then((res) => {
        console.log(res)
        if (res.data.status === 1) {
          this.delayCloseDialog()
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    delayCloseDialog () {
      this.isSetPayPasswordSuccess = true
      this.delayTimer = setInterval(() => {
        if (this.delayTime <= 0) {
          clearInterval(this.delayTimer)
          this.closeDialog()
        } else {
          this.delayTime -= 1
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.change-container {
	background-color: #fff;
}

.change-account {
	width: 416px;
	padding: 40px;
}

.change-account-title {
	height: 28px;
	line-height: 28px;
	font-size: 20px;
	color: #333;
	text-align: center;
}

.change-account-label {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	margin-top: 40px;
}

.change-account-label span {
	color: #ff600a;
}

.change-account-label-middle {
	margin-top: 24px;
}

.change-account-input {
	width: 416px;
	height: 48px;
	margin-top: 12px;
}

.change-account-input input {
	width: 384px;
	height: 46px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	padding: 0 15px;
}

.change-account-input-btn {
	height: 48px;
	margin-top: 12px;
}

.change-account-verification-input {
	float: left;
	width: 290px;
	height: 48px;
}

.change-account-verification-input input {
	width: 260px;
	height: 46px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	padding: 0 15px;
}

.change-account-btn {
	float: right;
	width: 110px;
	height: 48px;
}

.change-account-btn button {
	width: 110px;
	height: 48px;
	border: 0;
	border-radius: 2px;
	color: #fff;
	background-color: #ff600a;
	cursor: pointer;
}

.change-account-btn button:hover {
	background-color: #ff3c00;
}

.change-account-btn button:active {
	background-color: #e83700;
}

.change-account-btn button:disabled {
	background-color: #ccc;
	cursor: no-drop;
}

.change-account-btn-group {
	margin-top: 40px;
	font-size: 0;
}

.change-account-btn-group .btn-item {
	width: 200px;
	height: 48px;
	border-radius: 2px;
	font-size: 16px;
	cursor: pointer;
}

.change-account-btn-group .btn-confirm {
	border: 1px solid #ff600a;
	background-color: #ff600a;
	color: #fff;
	margin-right: 16px;
}

.change-account-btn-group .btn-confirm:hover {
	background-color: #ff3c00;
}

.change-account-btn-group .btn-confirm:active {
	background-color: #e83700;
}

.change-account-btn-group .btn-cancle {
	border: 1px solid #d7d7d7;
	background-color: #fff;
	color: #a5a5a5;
}

.change-success {
	width: 480px;
	padding: 60px 0;
}

.change-success-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	background: url(../../../assets/images/icon_success.png) no-repeat center;
}

.change-success-title {
	height: 26px;
	line-height: 26px;
	font-size: 24px;
	color: #333;
	text-align: center;
	margin-top: 24px;
}

.change-success-tip {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #747474;
	text-align: center;
	margin-top: 12px;
}
</style>